<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('表单项联动功能')}`">{{ $t('表单项联动功能') }}</t>
            <p>
                为某个控件配置<span class="d-code">relationships</span>便可使它和其他控件建立联动关系，该属性的配置规则为
                <span class="s-code">{ "被联动的控件对应的code": &nbsp;null | String }</span>
            </p>
            <p>
                当配置了联动关系的控件的绑定值发生改变时（假设改变后的值为<span class="s-code">value</span>），则：
            </p>
            <li>被联动的控件对应的绑定值将会被清空</li>
            <li>
                若被联动的控件是通过<span class="s-code">requestConfig</span>动态获取的数据，
                并且<span class="s-code">relationships</span>内配置的参数的键名不为<span class="s-code">null</span>时，
                则将会把<span class="s-code">value</span>当做参数，重新调用接口获取数据；
            </li>
            <li>
                默认情况下，无论上一个表单控件值是否为空（假设为控件A），它所联动的控件（假设为控件B）都会去掉接口重新获取选项数据。
                但你可以在 控件B 内配置<span class="s-code">requestConfig.ignoreEmptyRelationRequest</span>为<span class="s-code">true</span>，那么当控件A的值为空时，控件B不会去掉接口获取选项数据
            </li>
            <li>
                控件配置项<span class="s-code">requestConfig.url</span>支持配置<span class="s-code-gray">String | Function</span>，当为<span class="s-code-gray">Function</span>
                时（v1.0.9及以上版本支持），参数为与当前控件建立了联动关系的控件值的集合，需 return 新的接口地址，不 return 或 return 空值则会中断此次请求。
            </li>
            <li>
                注意：此处示例请求的接口是由<span class="s-code">本地json数据</span>模拟的，查询结果不一致属于正常，你可以打开<span class="s-code">F12</span>查看接口请求情况
            </li>
        </template>
        <sib-form :row-field-size="4" :fields="fields" @submit="submit"></sib-form>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const fields = ref([
            {
                label: '姓名',
                code: 'name',
                type: 'text',
                maxlength: 30,
            },
            {
                label: '国籍',
                labelTips: '国籍切换或清空时，省将被清空，且默认会触发市重新请求接口\n请求参数为 { countryKey: 国籍的新值 }',
                code: 'country',
                type: 'select',
                options: [
                    { label: '中国', value: 1 },
                    { label: '外国', value: 2 },
                ],
                relationships: {
                    // 国籍切换或清空时，省将被清空，且会触发省重新请求接口，请求参数为 { countryKey: 国籍的新值 }
                    province: 'countryKey',
                },
            },
            {
                label: '省',
                labelTips: '省切换或清空时，市将被清空，且会触发市重新请求接口\n请求参数为 { provinceKey: 省的新值 }',
                code: 'province',
                type: 'select',
                options: [],
                requestConfig: {
                    // url 支持使用function，参数为与当前表单项建立了联动关系的表单值
                    // 不 return 或 return 空值则会中断此次请求
                    url: (relationParam) => {
                        console.log('relationParam: ', relationParam);
                        return relationParam.countryKey ? `/api/province-data.json?a=${relationParam.countryKey}` : null;
                    },
                    method: 'get',
                    params: {},
                    // ignoreEmptyRelationRequest: true,
                },
                relationships: {
                    // 省切换或清空时，市将被清空，且会触发市重新请求接口，请求参数为 { provinceKey: 省的新值 }
                    city: 'provinceKey',
                },
            },
            {
                label: '市',
                code: 'city',
                type: 'select',
                options: [],
                requestConfig: {
                    url: '/api/city-data.json',
                    method: 'get',
                    params: {},
                },
            },
            {
                label: '开关',
                labelTips: '开关切换时:\n姓名、国籍、省、市将被清空；\n开关的切换不会直接导致省和市重新请求接口\n但是上方国籍和省控件配置了 relationships，所以国籍跟省变为空值时，会触发省和市重新请求数据',
                code: 'switch',
                type: 'switch',
                relationships: {
                    // 开关切换时，姓名将被清空
                    name: null,
                    // 开关切换时，国籍将被清空
                    country: null,
                    // 开关切换时，省将被清空；开关的切换不会直接导致省重新请求接口，但是上方国籍控件配置了 relationships，所以国籍变为空值时，会触发省重新请求数据
                    province: null,
                    // 开关切换时，市将被清空；开关的切换不会直接导致市重新请求接口，但是上方省控件配置了 relationships，所以省变为空值时，会触发市重新请求数据
                    city: null,
                },
            },
        ]);

        const submit = (form, cb) => {
            console.log('form: ', form);
            setTimeout(cb, 3000);
        };

        return {
            fields,
            submit,
            templateString: `<template>
    <sib-form :row-field-size="4" :fields="fields" @submit="submit"></sib-form>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const fields = ref([
            {
                label: '姓名',
                code: 'name',
                type: 'text',
                maxlength: 30,
            },
            {
                label: '国籍',
                labelTips: '国籍切换或清空时，省将被清空，且会触发市重新请求接口\\n请求参数为 { countryKey: 国籍的新值 }',
                code: 'country',
                type: 'select',
                options: [
                    { label: '中国', value: 1 },
                    { label: '外国', value: 2 },
                ],
                relationships: {
                    // 国籍切换或清空时，省将被清空，且会触发省重新请求接口，请求参数为 { countryKey: 国籍的新值 }
                    province: 'countryKey',
                },
            },
            {
                label: '省',
                labelTips: '省切换或清空时，市将被清空，且会触发市重新请求接口\\n请求参数为 { provinceKey: 省的新值 }',
                code: 'province',
                type: 'select',
                options: [],
                requestConfig: {
                    // url 支持使用function，参数为与当前表单项建立了联动关系的表单值
                    // 不 return 或 return 空值则会中断此次请求
                    url: (relationParam) => {
                        console.log('relationParam: ', relationParam);
                        return relationParam.countryKey ? \`/api/province-data.json?a=\${relationParam.countryKey}\` : null;
                    },
                    method: 'get',
                    params: {},
                },
                relationships: {
                    // 省切换或清空时，市将被清空，且会触发市重新请求接口，请求参数为 { provinceKey: 省的新值 }
                    city: 'provinceKey',
                },
            },
            {
                label: '市',
                code: 'city',
                type: 'select',
                options: [],
                requestConfig: {
                    url: '/api/city-data.json',
                    method: 'get',
                    params: {},
                },
            },
            {
                label: '开关',
                labelTips: '开关切换时:\\n姓名、国籍、省、市将被清空；\\n开关的切换不会直接导致省和市重新请求接口\\n但是上方国籍和省控件配置了 relationships，所以国籍跟省变为空值时，会触发省和市重新请求数据',
                code: 'switch',
                type: 'switch',
                relationships: {
                    // 开关切换时，姓名将被清空
                    name: null,
                    // 开关切换时，国籍将被清空
                    country: null,
                    // 开关切换时，省将被清空；开关的切换不会直接导致省重新请求接口，但是上方国籍控件配置了 relationships，所以国籍变为空值时，会触发省重新请求数据
                    province: null,
                    // 开关切换时，市将被清空；开关的切换不会直接导致市重新请求接口，但是上方省控件配置了 relationships，所以省变为空值时，会触发市重新请求数据
                    city: null,
                },
            },
        ]);

        const submit = (form, cb) => {
            console.log('form: ', form);
            setTimeout(cb, 3000);
        };

        return { fields, submit };
    },
};
<\/script>`,
        };
    },
};
</script>
